<template>
  <div>
    <el-dialog v-model="editCategoryConfig.visible" :title="editCategoryConfig.title" width="600">
      <div>
        <div class="tip">设置关键词后，若访客对话中触发关键词，AI将优先识别并回复，提升回复准确率。</div>
        <div class="formItemClass">
          <span class="label">分类名称:</span>
          <el-input placeholder="请输入分类名称" style="width: 300px;" v-model.trim="editCategoryConfig.categoryName"></el-input>
        </div>
        <div class="formItemClass">
          <span class="label">分类备注:</span>
          <el-input placeholder="请输入分类备注" style="width: 300px;" v-model.trim="editCategoryConfig.categorySubtitle"></el-input>
        </div>
        <div class="formItemClass">
          <span class="label">关键词:</span>
          <div>
            <div v-for="(item, index) in matchList" :key="index" style="margin-bottom: 10px" class="keyWordItem">
              <el-select v-model="item.type" style="width: 100px; margin-right: 10px;">
                <el-option
                  v-for="item in keyWordList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-input placeholder="请输入触发关键字"  v-model.trim="item.keyword" style="width: 200px;"></el-input>
              <span class="iconBox">
                <el-icon :size="24" v-if="index === 0" @click="addMatch"><CirclePlus /></el-icon>
                <el-icon :size="24" v-else @click="removeMatch(index)"><Remove /></el-icon>
              </span>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <div>
          <el-button @click="close">取消</el-button>
          <el-button @click="save" type="primary">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref, reactive, inject} from "vue"
import {add_auto_reply_strategy, update_auto_reply_strategy} from "@/api/settingtApi"
import {ElMessage} from "element-plus";
const currentBotId = inject("currentBotId")

const editCategoryConfig = reactive({
  visible: false,
  title: "编辑分类",
  id: "",
  categoryName: "",
  categorySubtitle:""
})
const matchList = ref([
  {type: 1, keyword: "" }
])
const keyWordList = ref([
  {value: 1, label: "半匹配"},
  {value: 2, label: "全匹配"},
])

const addMatch = () => {
  matchList.value.push({type: 1, keyword: "" })
}
const removeMatch = (index) => {
  matchList.value.splice(index, 1)
}
const openType = ref()
const openDialog = (type, item = {}) => {
  openType.value = type
  if(type === "add") {
    editCategoryConfig.title = "添加分类"
    matchList.value = [{type: 1, keyword: "" }]
    editCategoryConfig.categoryName = ""
    editCategoryConfig.categorySubtitle = ""
    editCategoryConfig.id = ""
  }else if(type === "edit") {
    editCategoryConfig.title = "编辑分类"
    editCategoryConfig.id = item.id
    editCategoryConfig.categoryName = item.strategyName
    editCategoryConfig.categorySubtitle = item.memo
    matchList.value = [...item.keywords]
  }
  editCategoryConfig.visible = true
}
const emits = defineEmits(["editChange"])

const save = async () => {
  const list = matchList.value.filter(el => el.keyword)
  let params = {
    robotId: currentBotId,
    strategyName: editCategoryConfig.categoryName,
    memo: editCategoryConfig.categorySubtitle,
    keywords: list
  }
  if(!params.strategyName) {
    return ElMessage.warning("请输入分类名称")
  }
  if(!list.length) {
    return ElMessage.warning("请输入匹配关键字")
  }
  let res = {}
  if(openType.value === "add"){
    res = await add_auto_reply_strategy(params)
  }else {
    params.id = editCategoryConfig.id
    res = await update_auto_reply_strategy(params)
  }
  ElMessage.success(res.msg)
  close()
  emits("changeCategory")
}
const close = () => {
  editCategoryConfig.visible = false
}
defineExpose({openDialog})
</script>

<style lang="scss" scoped>
.formItemClass {
  display: flex;
  //align-items: center;
  margin-top: 20px;
  font-size: 13px;
  .label {
    width: 70px;
    text-align: right;
    margin-right: 10px;
    margin-top: 8px;
  }
  p{
    margin: 0;
    margin-bottom: 5px;
  }
  .keyWordItem {
    display: flex;
    align-items: center;
    .iconBox{
      padding-top: 3px;
      margin-left: 20px;
    }
  }

}
::v-deep(.el-dialog__title) {
  font-size: 16px;
}
.tip {
  border: 1px solid #bde5ff;
  background: #e6f7ff;
  padding: 10px;
}
</style>